import React from "react";
const ThemeContext = React.createContext("dark");
class App extends React.Component {
  constructor() {
    super();
    this._text_data = {};
    this.state = { count: this._text_data };
  }
  handleClick = () => {
    this._text_data.a = 0;
    this.setState({ count: this._text_data });
  };
  render() {
    console.log("render App");
    return (
      <ThemeContext.Provider value={this.state.count}>
        <button onClick={this.handleClick}>点我改变状态</button>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
class Toolbar extends React.Component {
  // shouldComponentUpdate() {
  //   return false;
  // }
  render() {
    console.log("render Toolbar");
    return (
      <div>
        <ThemedButton count={this.props.count} />
      </div>
    );
  }
}
// class ThemedButton extends React.Component {
//   render() {
//     console.log("render ThemedButton");
//     return <button theme={this.context}>{this.context}</button>;
//   }
// }
// ThemedButton.contextType = ThemeContext;
// ThemeContext.Consumer可以让函数式组件也拥有消费者的响应式能力
function ThemedButton() {
  console.log("render ThemedButton");
  return (
    <ThemeContext.Consumer>
      {(count) => <button>{count.toString()}</button>}
    </ThemeContext.Consumer>
  );
}
export default App;
